<template>
  <div>
    <a-list
      :data-source="userFiles"
      size="small"
      :loading="loading"
      :pagination="{
        pageSize: query.pageSize,
        current: query.pageNum,
        total: query.total,
        onChange,
      }"
    >
      <template #header>
        <div class="flex items-center justify-between">
          <div>文件列表</div>
          <a-tooltip title="刷新">
            <a-button type="link" @click="reload" :loading="loading">
              <SyncOutlined />
            </a-button>
          </a-tooltip>
        </div>
      </template>
      <template #renderItem="{ item }">
        <a-list-item
          @click="selectItem(item)"
          class="system__hover mb-2"
          :class="{ active: item.filePath === modelValue }"
        >
          <a-list-item-meta
            :title="item.fileName.slice(0, 10)"
            :description="useDateFormat(item.createTime, 'YYYY-MM-DD').value"
          >
            <template #avatar>
              <FileRender
                width="48px"
                height="48px"
                type="file"
                :filename="item.fileName"
                :src="item.filePath"
              />
            </template>
          </a-list-item-meta>
        </a-list-item>
      </template>
    </a-list>
  </div>
</template>

<script setup lang="ts">
import { fetchFilesList } from '@/api/modules/ax/files/files';
import type { AxFiles } from '@/api/modules/ax/files/types';
import { FILE_ENUM } from '@/global/enum/common';
import FileRender from '@/views/components/file-render/FileRender.vue';
import { useDateFormat } from '@vueuse/core';
import { userFiles } from './data';
import { useQuery } from '@/utils/common/hooks';

const query = useQuery<AxFiles>();
const props = withDefaults(
  defineProps<{
    type?: FILE_ENUM;
  }>(),
  {
    type: FILE_ENUM.IMAGE,
  },
);

const model = defineModel('modelValue');

const loading = ref(false);

/**
 * @description: 清空缓存并刷新
 */
const reload = () => {
  getFiles();
};
/**
 * @description:
 *   获取文件列表
 */
const getFiles = async () => {
  if (userFiles.value.length === 0) {
    loading.value = true;
    const { data } = await fetchFilesList(query.value);
    userFiles.value = data.rows;
    query.value.total = data.total;
    loading.value = false;
  }
};

const selectItem = (item: AxFiles) => {
  model.value = item.filePath;
};

onMounted(() => {
  query.value.fileType = props.type;
  getFiles();

});

const onChange = (page: number, pageSize: number) => {
  query.value.pageNum = page;
  query.value.pageSize = pageSize;
  getFiles()
};
</script>

<style lang="scss" scoped>
.active {
  border: 1px solid var(--primary) !important;
}
:deep(.ant-list-item) {
  border-radius: var(--radius);
  border: 1px solid transparent;
}
:deep(.ant-list-header) {
  padding: 0;
  padding-bottom: 4px;
}
.ant-list-item {
  cursor: default;
}
:deep(.ant-list-pagination){
  margin-top: 1rem;
}
</style>
